<template>
    <div class="user-detail">
        <el-header>
            <p>用户详情</p>
        </el-header>
        <el-main>
            <div class="base-info">
                <p>基本信息</p>
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <div class="grid-content">
                            用户名：{{ baseInfo.nick_name || baseInfo.user_name }}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            性别： {{ gender }}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            生日：{{ baseInfo.birth || '' }}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            地区：
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <div class="grid-content">
                            手机：{{ baseInfo.phone }}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <span>车辆vin码：</span>  <span>{{ baseInfo.vin}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            邮箱：
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            邮编：
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="start">
                    <el-col :span="12">
                        <div class="grid-content">
                            账号创建时间：{{ baseInfo.create_time }}
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content">
                            上次登录时间： {{ baseInfo.last_login_time }}
                        </div>
                    </el-col>
                    
                </el-row>
            </div>
            <div class="user-setting">
                <p>个人设置</p>
                <ul>
                    <li>
                        <div class="bgBox">
                            <img :src="background" alt="">
                        </div>
                        
                        <p>中控背景</p>
                    </li>
                    <li>
                        <div class="bgBox">
                            <img :src="theme" alt="">
                        </div>
                        
                        <p>仪表主题</p>
                    </li>
                    <li>
                        <div class="bgBox">
                            <img :src="portrait" alt="">
                        </div>
                        
                        <p>驾舱形象</p>
                    </li>
                    <li>
                        <span>
                            <img src="./ziti1.png" alt="">
                            <em :style="{ 'font-family': fontFamily }">{{ fontName }}</em>
                        </span>
                        
                        <p>字体</p>
                    </li>
                </ul>
            </div>
        </el-main>
    </div>
</template>

<script>
import { personalInfo } from '@/api/vechile/VechileInfo'
import { getBackground, getTheme, getPortrait, getFont } from '@/api/backgroundController/backgroundController'
export default {
    name: 'UserDetail',
    data() {
        return {
            baseInfo: this.$route.query,
            setArr: [],
            background: '' || require('./BG.png'),
            theme: '' || require('./jingdian.png'),
            portrait: '' || require('./smallh.png'),
            fontName: '' || '普惠粗体',
            fontFamily: ''
        }
    },
    
    computed: {
        gender(){
            if(this.baseInfo.gender == 1){
                return '女'
            }else if(this.baseInfo.gender == 2){
                return '男'
            }else{
                return '未知'
            }
        }
    },
    methods: {
        getPersonalInfo(){
            var params = this.baseInfo.vehicle_id
            personalInfo(params).then(res => {
                console.log(res)
                // console.log(res.result[0].vehicle_id)  
                this.setArr = res.result
                var bgId = res.result[0].background_id
                getBackground(bgId).then(res => {
                    console.log(res)
                    if(res.resultCode == 1){
                        this.background = res.data.image
                    }
                })
                var cluster_style_id = res.result[0].cluster_style_id
                getTheme(cluster_style_id).then(res => {
                    console.log(res)
                    if(res.resultCode == 1){
                        this.theme = res.data.image
                    }
                })
                var portrait_id = res.result[0].portrait_id
                getPortrait(portrait_id).then(res => {
                    console.log(res)
                    if(res.resultCode == 1){
                        this.portrait = res.data.image
                    }
                })
                var font_id = res.result[0].font_id
                console.log(font_id)
                getFont(font_id).then(res => {
                    console.log(res)
                    if(res.resultCode == 1){
                        this.fontName = res.data.name
                        this.fontFamily = res.data.fontfamily
                    }
                })
            })
        },
        
    },
    mounted(){
        
    },
    created(){
        
            this.getPersonalInfo()
        
        
    }
}
</script>

<style lang="scss" scoped>
.user-detail{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 30;
    .el-header{
        height: 64px !important;
        line-height: 64px;
        p{
            font-weight: bold;
        }
    }
    .base-info{
        p{
            font-weight: bold;
        }
        .el-row{
            height: 40px;
            line-height: 40px;
            margin-bottom: 20px;
            padding: 0 20px;
            box-sizing: border-box;
            &:nth-of-type(1){
                border-bottom: 1px dashed #ccc !important;
                margin-top: 20px;
            }
            &:nth-of-type(2){
                border-bottom: 1px dashed #ccc !important;
            }
            &:nth-of-type(3){
                border-bottom: 1px dashed #ccc !important;
            }
            span{
                display: inline-block;
                // width: 100px;
                &:nth-of-type(1){
                    width: 80px;
                }
            }
        }
    }
    .user-setting{
        margin-top: 40px;
        p{
            font-weight: bold;
        }
        ul{
            display: flex;
            justify-content: flex-start;
            margin-top: 20px;
        }
        li{
            width: 184px;
            height: 184px;
            text-align: center;
            &:nth-of-type(3){
                .bgBox{
                    background-color: #000000 !important;
                }
            }
            &:nth-of-type(2){
                .bgBox{
                    background-color: #000000 !important;
                }
            }
            .bgBox{
                width: 166px;
                height: 157px;
                margin: 0 auto;
            }
            img{
                width: 166px;
                height: 157px;
            }
            p{
                font-weight: normal;
                margin-top: 10px;
            }
            span{
                display: inline-block;
                width: 166px;
                height: 157px;
                line-height: 158px;
                img{
                    width: 14px;
                    height: 14px;
                    vertical-align: middle;
                    padding-right: 5px;
                }
            }
        }
    }
}
.grid-content{
    font-size: 14px !important;
}
</style>

